<!DOCTYPE html>
<!-- saved from url=(0033)http://www.layui.com/api/runHtml/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
  <link rel="stylesheet" href="./layui.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
<link id="layuicss-laydate" rel="stylesheet" href="./laydate.css" media="all"><link id="layuicss-layer" rel="stylesheet" href="./layer.css" media="all"></head>
<body>
 
<table class="layui-hide" id="test" lay-filter="demo"></table><div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" style=" height:332px;"><div class="layui-table-box"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><thead><tr><th data-field="id"><div class="layui-table-cell laytable-cell-1-id"><span>ID</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th><th data-field="username"><div class="layui-table-cell laytable-cell-1-username"><span>用户名</span></div></th><th data-field="sex"><div class="layui-table-cell laytable-cell-1-sex"><span>性别</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th><th data-field="city"><div class="layui-table-cell laytable-cell-1-city"><span>城市</span></div></th><th data-field="sign"><div class="layui-table-cell laytable-cell-1-sign"><span>签名</span></div></th><th data-field="experience"><div class="layui-table-cell laytable-cell-1-experience"><span>积分</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th><th data-field="score"><div class="layui-table-cell laytable-cell-1-score"><span>评分</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th><th data-field="classify"><div class="layui-table-cell laytable-cell-1-classify"><span>职业</span></div></th><th data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth"><span>财富</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th><th data-field="9"><div class="layui-table-cell laytable-cell-1-9" align="center"><span></span></div></th><th class="layui-table-patch"><div class="layui-table-cell" style="width: 17px;"></div></th></tr></thead></table></div><div class="layui-table-body layui-table-main" style="height: 251px;"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><tbody><tr data-index="0"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10000</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-0</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-0</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-0</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">255</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">57</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">作家</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">82830700</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="1"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10001</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-1</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">男</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-1</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-1</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">884</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">27</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">词人</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">64928690</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="2" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10002</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-2</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-2</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-2</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">650</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">31</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">酱油</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">6298078</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="3" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10003</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-3</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-3</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-3</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">362</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">68</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">诗人</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">37117017</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="4" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10004</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-4</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">男</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-4</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-4</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">807</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">6</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">作家</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">76263262</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="5" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10005</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-5</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-5</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-5</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">173</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">87</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">作家</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">60344147</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="6" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10006</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-6</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-6</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-6</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">982</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">34</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">作家</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">57768166</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="7"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10007</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-7</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">男</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-7</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-7</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">727</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">28</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">作家</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">82030578</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="8"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10008</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-8</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">男</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-8</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-8</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">951</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">14</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">词人</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">16503371</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="9"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10009</div></td><td data-field="username"><div class="layui-table-cell laytable-cell-1-username">user-9</div></td><td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">女</div></td><td data-field="city"><div class="layui-table-cell laytable-cell-1-city">城市-9</div></td><td data-field="sign"><div class="layui-table-cell laytable-cell-1-sign">签名-9</div></td><td data-field="experience"><div class="layui-table-cell laytable-cell-1-experience">484</div></td><td data-field="score"><div class="layui-table-cell laytable-cell-1-score">75</div></td><td data-field="classify"><div class="layui-table-cell laytable-cell-1-classify">词人</div></td><td data-field="wealth"><div class="layui-table-cell laytable-cell-1-wealth">86801934</div></td><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr></tbody></table></div><div class="layui-table-fixed layui-table-fixed-l"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><thead><tr><th data-field="id"><div class="layui-table-cell laytable-cell-1-id"><span>ID</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span></div></th></tr></thead></table></div><div class="layui-table-body" style="height: 234px;"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><tbody><tr data-index="0"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10000</div></td></tr><tr data-index="1"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10001</div></td></tr><tr data-index="2" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10002</div></td></tr><tr data-index="3" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10003</div></td></tr><tr data-index="4" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10004</div></td></tr><tr data-index="5" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10005</div></td></tr><tr data-index="6" class=""><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10006</div></td></tr><tr data-index="7"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10007</div></td></tr><tr data-index="8"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10008</div></td></tr><tr data-index="9"><td data-field="id"><div class="layui-table-cell laytable-cell-1-id">10009</div></td></tr></tbody></table></div></div><div class="layui-table-fixed layui-table-fixed-r" style="right: 16px;"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><thead><tr><th data-field="9"><div class="layui-table-cell laytable-cell-1-9" align="center"><span></span></div></th></tr></thead></table><div class="layui-table-mend"></div></div><div class="layui-table-body" style="height: 234px;"><table cellspacing="0" cellpadding="0" border="0" class="layui-table"><tbody><tr data-index="0"><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="1"><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="2" class=""><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="3" class=""><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="4" class=""><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="5" class=""><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="6" class=""><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="7"><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="8"><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr><tr data-index="9"><td data-field="9" align="center" data-off="true"><div class="layui-table-cell laytable-cell-1-9"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></td></tr></tbody></table></div></div></div><div class="layui-table-page"><div id="layui-table-page1"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-2"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0"><i class="layui-icon"></i></a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><span class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="100">100</a><a href="javascript:;" class="layui-laypage-next" data-page="2"><i class="layui-icon"></i></a><span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button></span><span class="layui-laypage-count">共 1000 条</span><span class="layui-laypage-limits"><select lay-ignore=""><option value="10" selected="">10 条/页</option><option value="20">20 条/页</option><option value="30">30 条/页</option><option value="40">40 条/页</option><option value="50">50 条/页</option><option value="60">60 条/页</option><option value="70">70 条/页</option><option value="80">80 条/页</option><option value="90">90 条/页</option></select></span></div></div></div><style>.laytable-cell-1-id{ width: 80px; }.laytable-cell-1-username{ width: 80px; }.laytable-cell-1-sex{ width: 80px; }.laytable-cell-1-city{ width: 80px; }.laytable-cell-1-sign{ width: 170px; }.laytable-cell-1-experience{ width: 80px; }.laytable-cell-1-score{ width: 80px; }.laytable-cell-1-classify{ width: 80px; }.laytable-cell-1-wealth{ width: 135px; }.laytable-cell-1-9{ width: 165px; }</style></div>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<div class="layui-tab layui-tab-brief" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">演示说明</li>
    <li>日期</li>
    <li>分页</li>
    <li>上传</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    
      <div class="layui-carousel" id="test1" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 200px;">
        <div carousel-item="">
          <div class="layui-this"><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
          <div class=""><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
          <div class=""><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
          <div class=""><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
          <div class=""><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
        </div>
      <div class="layui-carousel-ind"><ul><li class="layui-this"></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li></ul></div><button class="layui-icon layui-carousel-arrow" lay-type="sub"></button><button class="layui-icon layui-carousel-arrow" lay-type="add"></button></div>
    </div>
    <div class="layui-tab-item">
      <div id="laydateDemo" lay-key="1"><div id="layui-laydate1" class="layui-laydate layui-laydate-static"><div class="layui-laydate-main laydate-main-list-0"><div class="layui-laydate-header"><i class="layui-icon laydate-icon laydate-prev-y"></i><i class="layui-icon laydate-icon laydate-prev-m"></i><div class="laydate-set-ym"><span lay-ym="2018-1" lay-type="year">2018年</span><span lay-ym="2018-1" lay-type="month">1月</span></div><i class="layui-icon laydate-icon laydate-next-m"></i><i class="layui-icon laydate-icon laydate-next-y"></i></div><div class="layui-laydate-content"><table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead><tbody><tr><td class="laydate-day-prev" lay-ymd="2017-12-31">31</td><td lay-ymd="2018-1-1" class=""><span class="laydate-day-mark">元旦</span></td><td lay-ymd="2018-1-2" class="">2</td><td lay-ymd="2018-1-3" class="">3</td><td lay-ymd="2018-1-4" class="">4</td><td lay-ymd="2018-1-5" class="">5</td><td lay-ymd="2018-1-6" class="">6</td></tr><tr><td lay-ymd="2018-1-7" class="">7</td><td lay-ymd="2018-1-8" class="">8</td><td lay-ymd="2018-1-9" class="">9</td><td lay-ymd="2018-1-10" class="">10</td><td lay-ymd="2018-1-11" class="">11</td><td lay-ymd="2018-1-12" class="">12</td><td lay-ymd="2018-1-13" class="">13</td></tr><tr><td lay-ymd="2018-1-14" class="">14</td><td class="layui-this" lay-ymd="2018-1-15">15</td><td lay-ymd="2018-1-16" class="">16</td><td lay-ymd="2018-1-17" class="">17</td><td lay-ymd="2018-1-18" class="">18</td><td lay-ymd="2018-1-19" class="">19</td><td lay-ymd="2018-1-20" class="">20</td></tr><tr><td lay-ymd="2018-1-21" class="">21</td><td lay-ymd="2018-1-22" class="">22</td><td lay-ymd="2018-1-23" class="">23</td><td lay-ymd="2018-1-24" class="">24</td><td lay-ymd="2018-1-25" class="">25</td><td lay-ymd="2018-1-26" class="">26</td><td lay-ymd="2018-1-27" class="">27</td></tr><tr><td lay-ymd="2018-1-28" class="">28</td><td lay-ymd="2018-1-29" class="">29</td><td lay-ymd="2018-1-30" class="">30</td><td lay-ymd="2018-1-31" class="">31</td><td class="laydate-day-next" lay-ymd="2018-2-1">1</td><td class="laydate-day-next" lay-ymd="2018-2-2">2</td><td class="laydate-day-next" lay-ymd="2018-2-3">3</td></tr><tr><td class="laydate-day-next" lay-ymd="2018-2-4">4</td><td class="laydate-day-next" lay-ymd="2018-2-5">5</td><td class="laydate-day-next" lay-ymd="2018-2-6">6</td><td class="laydate-day-next" lay-ymd="2018-2-7">7</td><td class="laydate-day-next" lay-ymd="2018-2-8">8</td><td class="laydate-day-next" lay-ymd="2018-2-9">9</td><td class="laydate-day-next" lay-ymd="2018-2-10">10</td></tr></tbody></table></div></div><div class="layui-laydate-footer"><div class="laydate-footer-btns"><span lay-type="clear" class="laydate-btns-clear">重置</span><span lay-type="now" class="laydate-btns-now">现在</span><span lay-type="confirm" class="laydate-btns-confirm">确定</span></div></div></div></div>
    </div>
    <div class="layui-tab-item">
      <div id="pageDemo"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a><span class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a><a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a></div></div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-upload-drag" id="uploadDemo">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
      </div><input class="layui-upload-file" type="file" name="file">
    </div>
  </div>
</div>

<blockquote class="layui-elem-quote layui-quote-nm" id="footer">layui 2.2.5 提供强力驱动</blockquote>

  
<script src="./layui.js"></script>
<script>
layui.config({
  version: '1515376178738' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
  
  //向世界问个好
  layer.msg('Hello World');
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //执行一个 table 实例
  table.render({
    elem: '#test'
    ,height: 332
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 170}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2017-11-11': '剁手'
      ,'2017-11-30': ''
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页');
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
      console.log(res)
    }
  });
  
  //底部信息
  var footerTpl = lay('#footer')[0].innerHTML;
  lay('#footer')[0].innerHTML = layui.laytpl(footerTpl).render({});
});
</script>

        
        <div class="layui-layer-move"></div></body></html>